import React, { useState, useCallback } from 'react';
import { Table, Button, Space, Divider, Breadcrumb } from 'antd';
import { round } from 'lodash';
import styles from './style.less';
import CreateForm from './component/CreateForm';
const columns = [
  {
    title: '类型',
    dataIndex: 'typeName',
    key: 'typeId',
  },

  {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    render: () => (
      <>
        <a>新增子类型</a>
        <Divider type="vertical" />
        <a onClick={() => {}}>编辑</a>
        <Divider type="vertical" />
        <a>删除</a>
      </>
    ),
  },
];

const data = [
  {
    key: 'typeId',
    name: 'typeName', 
    children: [
      {
        key:  '',
        name: '',
        age: '',
        address: '',
        children: [
          {
            key: '' ,
            name: '',
            age: '',
            address: '',
          },
        ],
      }, 
    ],
  }, 
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const Practicetype = (props) => {
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);

  const handleHidden = useCallback(() => {
    setCreateModalVisible(false);
  }, []);
  const handleAddtype = () => {
    setCreateModalVisible(true);
  };
  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>基础信息</Breadcrumb.Item>
        <Breadcrumb.Item>实践类型</Breadcrumb.Item>
      </Breadcrumb>
      <div className={styles.button}>
        <Button onClick={handleAddtype}> 新增</Button>
      </div>
      <Space align="center" style={{ marginBottom: 16 }}></Space>
      <Table columns={columns} rowSelection={{ ...rowSelection }} dataSource={data} />
      <CreateForm modalVisible={createModalVisible} onCancel={handleHidden} />
    </div>
  );
};

export default Practicetype;
